<template>
    <div class="listlive-box">
        <div class="live" @click="openLive(item.id)" v-for="item in listLiveData" :key="item.id">
            <img class="live-cover"/>
            <el-image style="width: 100px; height: 100px" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.coverId">
            </el-image>
            <h1>{{item.liveTitle}}</h1>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            // 存放直播列表
            listLiveData: []
        }
    },
    mounted () {
        this.listLive()
    },
    methods: {
        // 获取正在直播列表
        listLive(){
            this.$axios.get('/live/listLive').then(res => {
                this.listLiveData = res.data.data
            })
        },
        // 观看直播
        openLive(id){
            this.$router.push({name: 'LiveDetail', query: {id: id}})
        }
    }
}
</script>

<style>
.listlive-box{
    width: 100%;
    height: 100%;
}
</style>